import React from 'react'
import { Form, Input, Button, Message ,Upload,Icon,Row,Col,Table,DatePicker,Select} from 'antd';
const FormItem = Form.Item;
import api from '../../../api/advFamilyLockRelease';
const { RangePicker } = DatePicker;
const Option = Select.Option;
import moment from 'moment';

import './index.less'
import PanelBox from '../../../components/PanelBox';
import {INTERFACE_CORE_URL} from '../../../api/config';

import PayModal from '../../Common/PayModal';

class PageLog extends React.Component {
  state = {
    balance : 0.00,
    tableData:[],
    pagination: {
      pageSize: 10,
      pageNum: 1,
    },
    setSearchParam:[],
    rowId:''
  }
  getAllLog = (params) => {
    this.setState({ loading: true });
    if(!params.advId){
      params.advId=this.state.rowId;
    }
   
    api.get('/pageLog/getAll',{params}).then((data) => {
      const _data = data.data.list;
      const pagination = { ...this.state.pagination };
      pagination.total = data.data.total;
      this.setState({
        loading: false,
        tableData: _data,
        pagination,
      });
    });
  }
  handleTableChange = (pagination, filters, sorter) => {
    pagination.pageNum=pagination.current;
    this.setState({pagination});
   
    this.getAllLog({...pagination});
  }

  componentDidMount = () =>{
    let rowId=this.props.rowId;
    this.setState({rowId:rowId});
    this.getAllLog({advId:rowId});
  }
  componentWillReceiveProps = (nextProps) => {
    if (nextProps.rowId != this.props.rowId) {
      this.setState({rowId:nextProps.rowId});
      this.getAllLog({advId:nextProps.rowId});
    }
  }

  columns = [{
    title: '观看人姓名',
    dataIndex: 'userName',
    width: '10%',
  }, {
    title: '观看时间',
    dataIndex: 'watchDate',
    width: '10%',
  }, {
    title: '设备',
    dataIndex: 'hardName ',
    width: '20%',
    render:(text, record, index) =>  (
      <span>{record.hardName}({record.hardAddress})</span>
    ),
  }];

 
  render() {
    return (
      <div>
      <SearchForm searchUserState={this.state}  goSearch={this.handleTableChange} />
      <PanelBox>
         <Table columns={this.columns} dataSource={this.state.tableData} rowKey='id' onChange={this.handleTableChange} pagination={this.state.pagination} loading={this.state.loading} />
      </PanelBox>
      </div>
    )
  }

}
const WrappedPageLog = Form.create()(PageLog);
export default WrappedPageLog

class SearchsForm extends React.Component {
  // 开始搜索
  goSearch = (e) => {
    let params = this.props.form.getFieldsValue().search;
    let _this = this.props;
   
    if (params.date.length > 0) {
      params.startCreateDate = moment(params.date[0]).format("YYYY-MM-DD");
      params.endCreateDate = moment(params.date[1]).format("YYYY-MM-DD");
    }
    if(params.types == -1){
      delete params.types;
    }
    delete params.date;

    params.pageSize = _this.searchUserState.pagination.pageSize;
    params.pageNum = _this.searchUserState.pagination.pageNum;
    params.current =1;

    _this.goSearch(params);

  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const search = {
      type: "types",
      date: "date",
    };

    return <Form onSubmit={this.goSearch} layout="inline" style={{ marginBottom: '10px' }}>
      <FormItem label="日期">
        {getFieldDecorator('search.date', {
          initialValue: []
        })(
          <RangePicker format="YYYY/MM/DD" />
          )}
      </FormItem>
      <FormItem >
        <Button type="primary" icon="search" htmlType="submit">搜索</Button>
      </FormItem>
     
    </Form>
  }
}
const SearchForm = Form.create({})(SearchsForm);
